<template>
  <div>
    <div class="atTheBottomOfThe">
      <ul class="nav">
        <router-link tag="li" to="/found">
          <div class="icon">
            <i class="iconfont icon-wangyiyun11"></i>
          </div>
          <span>发现</span>
        </router-link>
        <router-link tag="li" to="/videoview">
          <div class="icon">
            <i class="iconfont icon-MV"></i>
          </div>
          <span>视频</span>
        </router-link>
        <router-link tag="li" to="/my">
          <div class="icon">
            <i class="iconfont icon-yinle"></i>
          </div>
          <span>我的</span>
        </router-link>
        <!-- <router-link tag="li" to="/focuson">
          <div class="icon">
            <i class="iconfont icon-xiwu2wode-1"></i>
          </div>
          <span>关注</span>
        </router-link> -->
      </ul>
    </div>
    <!-- <player></player> -->
    <router-view></router-view>
  </div>
</template>

<script>
import player from "@/components/player.vue";
export default {
  components: { player },
  data() {
    return {};
  },
  methods: {},
  mounted() {},
};
</script>

<style lang="scss" scoped>
.atTheBottomOfThe {
  position: fixed;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 50px;
  width: 100%;
  z-index: 1;

  background-color: #ffff;
  .nav {
    display: flex;

    li {
      flex: 1;
      margin-top: 2px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      color: #b2b2b2;
      .icon {
        width: 30px;
        height: 30px;
        // background-color: red;
        border-radius: 50%;

        i {
          // font-size: 24px;
          line-height: 30px;
        }
      }

      .icon-wangyiyun11 {
        font-size: 22px;
        margin-right: 1px;
      }

      .icon-MV {
        font-size: 18px;
      }

      .icon-yinle {
      }

      .icon-xiwu2wode-1 {
        font-size: 24px;
      }

      span {
        margin-top: 2px;
        font-size: 12px;
        // color: rgb(246, 63, 55);;
      }
    }
  }
  .router-link-active {
    span {
      color: rgb(246, 63, 55);
    }

    .icon {
      color: #fff;
      background: rgb(246, 63, 55);
      background: linear-gradient(
        91deg,
        rgba(246, 63, 55, 1) 0%,
        rgba(255, 134, 125, 1) 100%
      );
    }
  }
}
</style>

